<template>
  <view>
    <loading v-if="0 != loading" :status="loading" />
    <view v-else class="body">
       <!-- <nav-bar title="优惠券详情" color="#fff" :back="true" :home="false" iconTheme="white" background="transparent" @back="back"></nav-bar> -->
			 <!-- #ifdef H5 || APP -->
			 <view class="back iconfont icon-leftArrow" @tap="back">
			   <image src="/static/image/left.png" style="width: 38rpx;height: 38rpx;"></image>
			   <view>优惠券详情</view>
			 </view>
			 <!-- #endif -->
			 <!-- #ifdef MP-WEIXIN -->
			 <view class="back iconfont icon-leftArrow" :style="'top:' + menuBtnInfo.top + 'px'" @tap="back"> 优惠券详情</view>
			 <!-- #endif -->
      <view class="banner-bg"
        :style="'background: linear-gradient(180deg, ' + platformConfig.gradientColors[0] + ' 0%, ' + platformConfig.gradientColors[1] + ' 100%)'">
      </view>
      <view class="Qcode-container">
        <image class="Qcode-bg" src="/static/image/coupon/Qcode_bg.png"></image>
        <view class="Qcode-content">
          <view class="Qcode-title">{{ couponCodeDTO.couponName }}</view>
          <view class="Qcode-num"
            v-if="couponCodeDTO.couponType == '1' || couponCodeDTO.couponType == '3' || couponCodeDTO.couponType == '5'">
            <text
              class="num-text">满{{ formatFenMoney(couponCodeDTO.useCondAmt) }}元减{{ formatFenMoney(couponCodeDTO.discountAmt) }}元</text>
          </view>
          <view class="Qcode-num" v-else-if="couponCodeDTO.couponType == '2' || couponCodeDTO.couponType == '4'">
            <text
              class="num-text">满{{ formatFenMoney(couponCodeDTO.useCondAmt) }}元打{{ couponCodeDTO.discountAmt }}折</text>
          </view>
          <view class="Qcode-img">
            <image class="QRCode-img" :src="drawQrCodeData"></image>
          </view>
          <view class="Qcode-time">{{ couponCodeDTO.qrcode }}</view>
          <view class="Qcode-tips" v-if="couponCodeDTO.couponOrigin == '1'">使用状态以微信卡包为准</view>
        </view>
      </view>

      <view class="coupon-detail">
        <view class="detail-content">
          <view class="detail-title">
            <text>优惠券名称</text>
          </view>
          <view class="detail-info">{{ couponCodeDTO.couponName }}</view>
        </view>

        <view class="detail-content">
          <view class="detail-title">
            <text>使用期限</text>
          </view>
          <view class="detail-info" v-if="couponCodeDTO.expireDateType == '1'">{{ couponCodeDTO.expireBeginTime }} ~
            {{ couponCodeDTO.expireEndTime }}</view>
          <view class="detail-info" v-else-if="couponCodeDTO.expireDateType == '2'">
            领取后{{ couponCodeDTO.expireDaysNum }}天内有效</view>
        </view>

        <view class="detail-content">
          <view class="detail-title">
            <text>使用说明</text>
          </view>
          <view class="detail-info">
            <text>{{ couponCodeDTO.description }}</text>
          </view>
        </view>

        <view class="detail-content">
          <view class="detail-title">
            <text>订单编号</text>
          </view>
          <view class="detail-info">
            <text>{{ couponCodeDTO.couponOrderid }}</text>
          </view>
        </view>

        <view class="detail-content">
          <view class="detail-title">
            <text>创建时间</text>
          </view>
          <view class="detail-info">
            <text>{{ couponCodeDTO.createTime }}</text>
          </view>
        </view>

        <!-- <view class="detail-content">
			<view class="detail-title">
				<text class="cycle"></text>
				<text>订单编号</text>
			</view>
			<view>{{couponCodeDTO.payId}}</view>
		</view>

		<view class="detail-content">
			<view class="detail-title">
				<text class="cycle"></text>
				<text>付款时间</text>
			</view>
			<view>{{couponCodeDTO.payTime}}</view>
		</view> -->
      </view>
      <coupon-mcht-list :coupon-id="couponId"></coupon-mcht-list>
    </view>
  </view>
</template>
<!-- <script module="util" lang="wxs" src="/utils/util.wxs"></script> -->
<script>
  import {
    http
  } from '@/utils/commonRequest.js'; // 局部引入
   import navBar from '@/components/nav/nav';
  import couponMchtList from '@/components/couponMchtList/couponMchtList';
  import loading from '@/components/loading/loading';
  const app = getApp();

  const utils = require('./../../../utils/util.js');

  const QRCode = require('../../../utils/weapp-qrcode.js');

  export default {
    components: {
      couponMchtList,
      loading,
      navBar
    },
    data() {
      return {
        loading: 1,

        //1加载中,0加载成功,-1加载失败
        couponId: '',

        couponCode: '',

        couponCodeDTO: {
          couponName: '',
          couponType: '',
          discountAmt: '',
          qrcode: '',
          couponOrigin: '',
          expireDateType: '',
          expireBeginTime: '',
          expireEndTime: '',
          expireDaysNum: '',
          description: '',
          couponOrderid: '',
          createTime: ''
        },

        menuBtnInfo: null,
        merchants: null,
        platformConfig: app.globalData.platformConfig,
        payId: '',
        drawQrCodeData: ''
      };
    },
    onLoad: function(options) {
      // #ifdef MP-WEIXIN
      let menuBtnInfo = uni.getMenuButtonBoundingClientRect();
      console.log(menuBtnInfo);
      this.menuBtnInfo = menuBtnInfo
      // #endif
      this.platformConfig = app.globalData.platformConfig
      let payId = options.payId;
      let couponId = options.id;
      if (utils.isEmpty(payId)) {
        utils.tips('参数异常');
        return;
      }
      this.payId = payId
      this.couponId = couponId
      this.queryCouponCode();
    },
    onShow: function() {},
    methods: {
      formatFenMoney(s) {
        if (undefined == s || '' == s || null == s) {
          return 0;
        } else {
          return (s / 100)
        }
      },
      back: function() {
        uni.navigateBack({
          delta: 1
        });
      },

      queryCouponCode: function() {
        const that = this;
        let params = {
          payId: that.payId,
          userLatitude: app.globalData.currLatitude,
          userLongitude: app.globalData.currLongitude
        };
        http.get('zsnshCoupon/couponCodeByPayId', {
          params: params
        }).then((res) => {
          console.log('获取优惠券详情res=', res);

          if (200 == res.data.code) {
            let imgData = QRCode.drawImg(res.data.couponCode.couponCode, {
              typeNumber: 4,
              // 密度
              errorCorrectLevel: 'L',
              // 纠错等级
              size: 800 // 白色边框
            });
            that.couponCodeDTO = res.data.couponCode
            that.merchants = res.data.merchantList
            that.drawQrCodeData = imgData
            that.loading = 0
          } else {
            that.loading = -1
            utils.tips('获取优惠券详情失败');
          }
        });
      },

      queryCouponMerchants: function() {
        let that = this;
        let params = {
          couponId: that.couponId,
          userLatitude: app.globalData.currLatitude,
          userLongitude: app.globalData.currLongitude
        };
        http.get('jilinEms/merchant/listSuitMerchantByCoupId', {
          params: params
        }).then((res) => {
          console.log('获取优惠券详情res=', res);

          if (200 == res.data.code) {
            that.merchants = null
          } else {
            that.loading = -1
            utils.tips('获取优惠券详情失败');
          }
        });
      },

      queryPlatCouponList: function() {
        let that = this;
        let params = {
          pageNum: 1,
          pageSize: 20
        };
        http.get('jilinEms/merchant/listCouponByPlat', {
          params: params
        }).then((res) => {
          console.log('获取优惠券列表res=', res);

          if (200 == res.data.code) {
            // let couponCodeDTO = res.data.couponCode;
            // couponCodeDTO = utils.formatCouponDate(couponCodeDTO);
            // that.setData({
            //   couponCodeDTO: couponCodeDTO
            // })
          } else {
            utils.tips('获取优惠券详情失败');
          }
        });
      },

      goMerchantList: function(e) {
        const couponId = e.currentTarget.dataset.id;

        if (!utils.isEmpty(couponId)) {
          uni.navigateTo({
            url: './couponMerchants?id=' + couponId
          });
        }
      },

      toMap: function(e) {
        var that = this;
        var index = e.currentTarget.dataset.index;
        var merchantInfo = that.merchants[index];
				var addrInfo = {
					address: merchantInfo.addr,
					name: merchantInfo.mchntName,
					lat: merchantInfo.lat,
					lng: merchantInfo.lng
				}
				utils.openLocation(addrInfo, app.globalData.currLatitude, app.globalData.currLongitude);
      }
    }
  };
</script>
<style>

  page {
    background: #f5f5f5;
  }

  .body {
    position: relative;
    height: 100%;
    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;
  }

  .back {
    position: fixed;
    top: 30rpx;
    left: 34rpx;
    width: 100%;
    font-weight: 500;
    font-size: 34rpx;
    color: #fff;
    z-index: 999;
    display: flex;
    align-items: center;
  }

  .back::before {
    margin-right: 30rpx;
  }

  .banner-bg {
    width: 750rpx;
    height: 315rpx;
    background: linear-gradient(180deg, #ff7663 0%, #fd5864 100%);
  }

  .Qcode-container {
    height: 860rpx;
    margin: -160rpx 24rpx 0;
    box-shadow: 0px 20rpx 60rpx 0px rgba(112, 136, 210, 0.1);
    position: relative;
    border-radius: 28rpx;
  }

  .Qcode-bg {
    position: absolute;
    width: 702rpx;
    height: 860rpx;
    z-index: 90;
    border-radius: 28rpx;
  }

  .Qcode-content {
    width: 100%;
    height: 860rpx;
    border-radius: 28rpx;
    position: relative;
    z-index: 99;
  }

  .Qcode-title {
    text-align: center;
    line-height: 60rpx;
    font-size: 44rpx;
    font-weight: 600;
    letter-spacing: 2rpx;
    padding-top: 60rpx;
  }

  .Qcode-num {
    display: flex;
    justify-content: center;
    margin: 14rpx auto 0;
    align-items: center;
    font-size: 32rpx;
    color: #666;
  }

  .num-text {
    font-size: 32rpx;
    color: #666;
    margin-right: 20rpx;
  }

  .num-copy {
    width: 94rpx;
    height: 36rpx;
    border-radius: 18rpx;
    background-color: rgba(204, 204, 204, 0.49);
    text-align: center;
    line-height: 36rpx;
    font-size: 22rpx;
    color: #666;
  }

  .Qcode-img {
    position: absolute;
		top: 310rpx;
		left: 197rpx;
		width: 308rpx;
		height: 308rpx;
		background-color: #eee;
  }

  .QRCode-img {
    width: 308rpx;
    height: 308rpx;
  }

  .Qcode-time{
    position: absolute;
    bottom: 100rpx;
    width: 100%;
    text-align: center;
    font-size: 30rpx;
    font-weight: 600;
  }
  
  .Qcode-tips{
    position: absolute;
    bottom: 50rpx;
    width: 100%;
    font-size: 24rpx;
    font-weight: 500;
    color: #999;
    text-align: center;
  }

  .banner-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .banner {
    width: 688rpx;
    height: 210rpx;
  }

  .banner-content {
    position: absolute;
    top: 0;
    left: 80rpx;
    height: 210rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 50rpx 0;
    color: #fff;
  }

  .coupon-info {
    display: flex;
    align-items: flex-end;
    line-height: 1;
    margin-top: 40rpx;
  }

  .coupon-amount {
    margin-right: 30rpx;
    font-size: 46rpx;
    font-weight: bold;
  }

  .coupon-detail {
    margin: 24rpx 32rpx;
    padding: 34rpx 40rpx 40rpx 24rpx;
    box-shadow: 0rpx 20rpx 60rpx 0rpx rgba(112, 136, 210, 0.1);
    border-radius: 16rpx;
    background-color: #fff;
  }

  .detail-content {
    display: flex;
    color: #666;
    margin-bottom: 24rpx;
    line-height: 46rpx;
  }

  .detail-title {
    width: 174rpx;
    display: flex;
    font-size: 26rpx;
    font-weight: 600;
  }

  .cycle {
    margin-right: 12rpx;
    width: 4rpx;
    height: 24rpx;
    background: #ed171f;
    height: 24rpx;
  }

  .detail-info {
    width: 446rpx;
    margin-top: 6rpx;
    margin-left: 20rpx;
    font-size: 24rpx;
    color: #b3b3b3;
    font-weight: 400;
    line-height: 34rpx;
  }

  .qrcode-container {
    padding: 40rpx 0;
    border-radius: 16rpx;
    /* box-shadow: 10rpx 10rpx 10rpx 10rpx #FAFAFA, -10rpx -10rpx 10rpx 10rpx #FAFAFA; */
    margin: 38rpx 32rpx 0;
    background: #fff;
    border-radius: 16rpx;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    height: 404rpx;
  }

  .share-img {
    width: 256rpx;
    height: 256rpx;
  }

  .qrcodeNum {
    margin-top: 32rpx;
    font-size: 26rpx;
    color: #333333;
    font-weight: bold;
  }

  .qrcode-tips {
    font-size: 28rpx;
    font-weight: 400;
    color: #ff4e4f;
    margin-top: 10rpx;
  }

  .storeinfo {
    background: #fff;
    margin: 36rpx;
    padding: 30rpx 20rpx 30rpx 30rpx;
    box-shadow: 10rpx 10rpx 10rpx 10rpx #fafafa, -10rpx -10rpx 10rpx 10rpx #fafafa;
    border-radius: 8rpx;
  }

  .arror-right {
    width: 24rpx;
    height: 24rpx;
    margin-left: 6rpx;
  }

  .storeinfo .info-detail {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    margin-bottom: 28rpx;
  }

  .info-detail-left {
    flex: 1;
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
  }

  .city-text {
    font-size: 28rpx;
    font-weight: 400;
    color: #666666;
  }

  .merchant-item {
    margin-bottom: 26rpx;
  }

  .storeinfo-address {
    display: flex;
    justify-content: space-between;
    margin-top: 14rpx;
    color: #666;
    font-size: 26rpx;
    font-weight: 400;
    color: #666666;
  }

  .storeinfo-address-l {
    flex: 1;
    display: flex;
  }

  .storeinfo-address-l image {
    width: 26rpx;
    height: 26rpx;
    margin-right: 8rpx;
    margin-top: 6rpx;
  }

  .storeinfo-address-l view {
    flex-basis: 90%;
  }

  .storeinfo-name {
    font-size: 30rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: bold;
    color: #333333;
  }
</style>
